home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / Forms Misc / order-form.izs < prev    next >
Text File  |  2005-09-28  |  10KB  |  320 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Order Form 
  4.  
  5. <!/TITLE>
  6.  
  7. <!DESCRIPTION>An order form which utilizes checkboxes and radio buttons for making a selection. The checkbox only allows one quantity of any item to be ordered, while the radio button only allows for one item within a defined group to be ordered. Script updates the order total as the visitor makes his/her selections, also note that the order total can not be manually altered by the visitor.<!/DESCRIPTION> 
  8.  
  9. <!CATEGORY>Forms<!/CATEGORY>
  10.  
  11. <!SCRIPT>
  12. <!-- START OF SCRIPT -->
  13.  
  14. <!-- HOW TO INSTALL ORDER FORM:
  15.  
  16.   1.  Copy code into the HEAD section of document
  17.   2.  Add the onLoad event handler into the BODY tag
  18.   3.  Put last coding into the BODY section of document  -->
  19.  
  20. <!-- STEP ONE: Add code into HEAD section of document  -->
  21.  
  22. <HEAD>
  23.  
  24. <SCRIPT LANGUAGE="JavaScript">
  25.  
  26.  
  27. <!-- Original:  Paul DeBrino -->
  28. <!-- Web Site:   http://infinity-rd.com -->
  29. <!-- Begin
  30.     function CheckChoice(whichbox)
  31.     {
  32.         with (whichbox.form)
  33.         {
  34.             //Handle differently, depending on type of input box.
  35.             if (whichbox.type == "radio")
  36.             {
  37.                 //First, back out the prior radio selection's price from the total:
  38.                 hiddentotal.value = eval(hiddentotal.value) - eval(hiddenpriorradio.value);
  39.                 //Then, save the current radio selection's price:
  40.                 hiddenpriorradio.value = eval(whichbox.price);
  41.                 //Now, apply the current radio selection's price to the total:
  42.                 hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.price);
  43.             }
  44.             else
  45.             {
  46.                 //If box was checked, accumulate the checkbox value as the form total,
  47.                 //Otherwise, reduce the form total by the checkbox value:
  48.                 if (whichbox.checked == false)
  49.                     { hiddentotal.value = eval(hiddentotal.value) - eval(whichbox.value); }
  50.                 else     { hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.value); }
  51.             }
  52.  
  53.             //Ensure the total never goes negative (some browsers allow radiobutton to be deselected):
  54.             if (hiddentotal.value < 0)
  55.                 {
  56.                 InitForm();
  57.                 }
  58.  
  59.             //Now, return with formatted total:
  60.             return(formatCurrency(hiddentotal.value));
  61.         }
  62.     }
  63.  
  64.     //Define function to format a value as currency:
  65.     function formatCurrency(num)
  66.     {
  67.        // Courtesy of http://www7.brinkster.com/cyanide7/
  68.         num = num.toString().replace(/\$|\,/g,'');
  69.         if(isNaN(num))
  70.            num = "0";
  71.         sign = (num == (num = Math.abs(num)));
  72.         num = Math.floor(num*100+0.50000000001);
  73.         cents = num%100;
  74.         num = Math.floor(num/100).toString();
  75.         if(cents<10)
  76.             cents = "0" + cents;
  77.         for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
  78.             num = num.substring(0,num.length-(4*i+3))+','+
  79.                   num.substring(num.length-(4*i+3));
  80.           return (((sign)?'':'-') + '$' + num + '.' + cents);
  81.     }
  82.  
  83.     //Define function to init the form on reload:
  84.     function InitForm()
  85.         {
  86.         //Reset the displayed total on form:
  87.         document.myform.total.value='$0';
  88.         document.myform.hiddentotal.value=0;
  89.         document.myform.hiddenpriorradio.value=0;
  90.         document.myform2.total.value='$0';
  91.         document.myform2.hiddentotal.value=0;
  92.         document.myform2.hiddenpriorradio.value=0;
  93.         document.myform2.hiddenpriorradio.value=0;
  94.  
  95.         //Set all checkboxes and radio buttons on form-1 to unchecked:
  96.         for (xx=0; xx < document.myform.elements.length; xx++)
  97.         {
  98.            if (document.myform.elements[xx].type == 'checkbox' | document.myform.elements[xx].type == 'radio')
  99.             {
  100.             document.myform.elements[xx].checked = false;
  101.             }
  102.         }
  103.         //Set all checkboxes and radio buttons on form-2 to unchecked:
  104.         for (xx=0; xx < document.myform2.elements.length; xx++)
  105.         {
  106.            if (document.myform2.elements[xx].type == 'checkbox' | document.myform2.elements[xx].type == 'radio')
  107.             {
  108.             document.myform2.elements[xx].checked = false;
  109.             }
  110.         }
  111.  
  112.     }
  113.  
  114. //  End -->
  115. </script>
  116.  
  117. </HEAD>
  118.  
  119. <!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->
  120.  
  121. <BODY onLoad="InitForm();" onreset="InitForm();">
  122.  
  123. <!-- STEP THREE: Copy code into BODY section of document  -->
  124.  
  125. <form method="POST" name="myform">
  126.     <font face=Arial size=2>
  127.     Steak $15.25
  128.         <input type="checkbox" name="Steak"   value=15.25  onclick="this.form.total.value=CheckChoice(this);">
  129.     Chicken $12.39
  130.         <input type="checkbox" name="Chicken" value=12.39 onclick="this.form.total.value=CheckChoice(this);">
  131.     Sushi $18.75
  132.         <input type="checkbox" name="Sushi"   value=18.75  onclick="this.form.total.value=CheckChoice(this);">
  133.     <br><br>
  134.     <b>Prepare with this special sauce (extra charge -- only one selection allowed):</b>
  135.     <br>
  136.     None, thanks 
  137.         <input type="radio" name="Sauce" value=none   price=0.00
  138.         onclick="this.form.total.value=CheckChoice(this);">
  139.     Duck Sauce $10.99
  140.         <input type="radio" name="Sauce" value=duck   price=10.99
  141.         onclick="this.form.total.value=CheckChoice(this);">
  142.     Ginger Sauce $5.00
  143.         <input type="radio" name="Sauce" value=ginger price=5.00
  144.         onclick="this.form.total.value=CheckChoice(this);">
  145.     Hot Sauce $1.50
  146.         <input type="radio" name="Sauce" value=hot    price=1.50
  147.         onclick="this.form.total.value=CheckChoice(this);">
  148.     <br><br><br>
  149.     <input type="hidden" name="hiddentotal" value=0>
  150.     <input type="hidden" name="hiddenpriorradio" value=0>
  151.     <font size=+1>
  152.     Your total is: <input type="text" name="total" readonly onFocus="this.blur();">
  153.     </font>
  154.     <br><br>
  155.     (Note: Total can not be changed by the visitor.)
  156.     </font>
  157. </form>
  158.  
  159.  
  160.  
  161.  
  162. <!-- END OF SCRIPT -->
  163. <!/SCRIPT>
  164.  
  165. <!PREVIEW>
  166. <!-- START OF SCRIPT -->
  167.  
  168. <!-- HOW TO INSTALL ORDER FORM:
  169.  
  170.   1.  Copy code into the HEAD section of document
  171.   2.  Add the onLoad event handler into the BODY tag
  172.   3.  Put last coding into the BODY section of document  -->
  173.  
  174. <!-- STEP ONE: Add code into HEAD section of document  -->
  175.  
  176. <HEAD>
  177.  
  178. <SCRIPT LANGUAGE="JavaScript">
  179.  
  180.  
  181. <!-- Original:  Paul DeBrino -->
  182. <!-- Web Site:   http://infinity-rd.com -->
  183. <!-- Begin
  184.     function CheckChoice(whichbox)
  185.     {
  186.         with (whichbox.form)
  187.         {
  188.             //Handle differently, depending on type of input box.
  189.             if (whichbox.type == "radio")
  190.             {
  191.                 //First, back out the prior radio selection's price from the total:
  192.                 hiddentotal.value = eval(hiddentotal.value) - eval(hiddenpriorradio.value);
  193.                 //Then, save the current radio selection's price:
  194.                 hiddenpriorradio.value = eval(whichbox.price);
  195.                 //Now, apply the current radio selection's price to the total:
  196.                 hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.price);
  197.             }
  198.             else
  199.             {
  200.                 //If box was checked, accumulate the checkbox value as the form total,
  201.                 //Otherwise, reduce the form total by the checkbox value:
  202.                 if (whichbox.checked == false)
  203.                     { hiddentotal.value = eval(hiddentotal.value) - eval(whichbox.value); }
  204.                 else     { hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.value); }
  205.             }
  206.  
  207.             //Ensure the total never goes negative (some browsers allow radiobutton to be deselected):
  208.             if (hiddentotal.value < 0)
  209.                 {
  210.                 InitForm();
  211.                 }
  212.  
  213.             //Now, return with formatted total:
  214.             return(formatCurrency(hiddentotal.value));
  215.         }
  216.     }
  217.  
  218.     //Define function to format a value as currency:
  219.     function formatCurrency(num)
  220.     {
  221.        // Courtesy of http://www7.brinkster.com/cyanide7/
  222.         num = num.toString().replace(/\$|\,/g,'');
  223.         if(isNaN(num))
  224.            num = "0";
  225.         sign = (num == (num = Math.abs(num)));
  226.         num = Math.floor(num*100+0.50000000001);
  227.         cents = num%100;
  228.         num = Math.floor(num/100).toString();
  229.         if(cents<10)
  230.             cents = "0" + cents;
  231.         for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
  232.             num = num.substring(0,num.length-(4*i+3))+','+
  233.                   num.substring(num.length-(4*i+3));
  234.           return (((sign)?'':'-') + '$' + num + '.' + cents);
  235.     }
  236.  
  237.     //Define function to init the form on reload:
  238.     function InitForm()
  239.         {
  240.         //Reset the displayed total on form:
  241.         document.myform.total.value='$0';
  242.         document.myform.hiddentotal.value=0;
  243.         document.myform.hiddenpriorradio.value=0;
  244.         document.myform2.total.value='$0';
  245.         document.myform2.hiddentotal.value=0;
  246.         document.myform2.hiddenpriorradio.value=0;
  247.         document.myform2.hiddenpriorradio.value=0;
  248.  
  249.         //Set all checkboxes and radio buttons on form-1 to unchecked:
  250.         for (xx=0; xx < document.myform.elements.length; xx++)
  251.         {
  252.            if (document.myform.elements[xx].type == 'checkbox' | document.myform.elements[xx].type == 'radio')
  253.             {
  254.             document.myform.elements[xx].checked = false;
  255.             }
  256.         }
  257.         //Set all checkboxes and radio buttons on form-2 to unchecked:
  258.         for (xx=0; xx < document.myform2.elements.length; xx++)
  259.         {
  260.            if (document.myform2.elements[xx].type == 'checkbox' | document.myform2.elements[xx].type == 'radio')
  261.             {
  262.             document.myform2.elements[xx].checked = false;
  263.             }
  264.         }
  265.  
  266.     }
  267.  
  268. //  End -->
  269. </script>
  270.  
  271. </HEAD>
  272.  
  273. <!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->
  274.  
  275. <BODY onLoad="InitForm();" onreset="InitForm();">
  276.  
  277. <!-- STEP THREE: Copy code into BODY section of document  -->
  278.  
  279. <form method="POST" name="myform">
  280.     <font face=Arial size=2>
  281.     Steak $15.25
  282.         <input type="checkbox" name="Steak"   value=15.25  onclick="this.form.total.value=CheckChoice(this);">
  283.     Chicken $12.39
  284.         <input type="checkbox" name="Chicken" value=12.39 onclick="this.form.total.value=CheckChoice(this);">
  285.     Sushi $18.75
  286.         <input type="checkbox" name="Sushi"   value=18.75  onclick="this.form.total.value=CheckChoice(this);">
  287.     <br><br>
  288.     <b>Prepare with this special sauce (extra charge -- only one selection allowed):</b>
  289.     <br>
  290.     None, thanks 
  291.         <input type="radio" name="Sauce" value=none   price=0.00
  292.         onclick="this.form.total.value=CheckChoice(this);">
  293.     Duck Sauce $10.99
  294.         <input type="radio" name="Sauce" value=duck   price=10.99
  295.         onclick="this.form.total.value=CheckChoice(this);">
  296.     Ginger Sauce $5.00
  297.         <input type="radio" name="Sauce" value=ginger price=5.00
  298.         onclick="this.form.total.value=CheckChoice(this);">
  299.     Hot Sauce $1.50
  300.         <input type="radio" name="Sauce" value=hot    price=1.50
  301.         onclick="this.form.total.value=CheckChoice(this);">
  302.     <br><br><br>
  303.     <input type="hidden" name="hiddentotal" value=0>
  304.     <input type="hidden" name="hiddenpriorradio" value=0>
  305.     <font size=+1>
  306.     Your total is: <input type="text" name="total" readonly onFocus="this.blur();">
  307.     </font>
  308.     <br><br>
  309.     (Note: Total can not be changed by the visitor.)
  310.     </font>
  311. </form>
  312.  
  313.  
  314.  
  315.  
  316. <!-- END OF SCRIPT -->
  317. <!/PREVIEW>
  318.  
  319. <!RELATED>NONE<!/RELATED>
  320.